<template>
  <div class="dialog-container">
    <div class="dialog-content">
      <div class="panel-container">
        <div class="panel-content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="140px"
          >
            <el-form-item
              label="菜单类型:"
              prop="level"
            >
              <el-radio-group
                v-model="form.level"
                @change="levelChange"
              >
                <el-radio :label="1">目录</el-radio>
                <el-radio :label="2">菜单</el-radio>
                <el-radio :label="3">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="菜单名称:"
              prop="title"
            >
              <el-input
                v-model="form.title"
                type="text"
                placeholder="请输入菜单名称"
              />
            </el-form-item>
            <el-form-item
              v-if="form.level === '2' || form.level === '3'"
              label="上级菜单:"
              prop="father_name"
            >
              <el-select
                ref="selectTree"
                v-model="form.father_name"
                placeholder="请选择"
              >
                <el-option
                  :key="form.father_id"
                  :value="form.father_id"
                  :label="form.father_name"
                  hidden
                />
                <el-tree
                  :data="menuList"
                  :props="defaultProps"
                  node-key="id"
                  accordion
                  highlight-current
                  @node-click="handleNodeClick"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="组件名称:"
              prop="name"
            >
              <el-input
                v-model="form.name"
                type="text"
                placeholder="请输入组件名称"
              />
            </el-form-item>
            <el-form-item
              v-if="form.level === '1'"
              label="路由地址:"
              prop="path_p"
            >
              <el-input
                v-model="form.path_p"
                type="text"
                placeholder="请输入路由地址"
              />
            </el-form-item>
            <el-form-item
              v-if="form.level === '1' || form.level === '2'"
              label="路径:"
              prop="path"
            >
              <el-input
                v-model="form.path"
                type="text"
                placeholder="请输入路径"
              />
            </el-form-item>
            <el-form-item
              label="排序:"
              prop="sort"
            >
              <el-input-number
                v-model="form.sort"
                controls-position="right"
                :min="0"
                :max="99999999999"
              />
            </el-form-item>
            <el-form-item
              label="是否固定在导航:"
              prop="affix"
            >
              <el-switch
                v-model="form.affix"
                active-text="是"
                inactive-text="否"
              />
            </el-form-item>
            <el-form-item style="margin-bottom: 0; margin-top: 40px">
              <div class="panel-line flex-end">
                <el-button @click="handleCancel">取消</el-button>
                <el-button
                  :loading="loading"
                  type="primary"
                  @click="handleSubmit"
                >
                  保存
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { apiSysPermissionAdd, apiSysPermissionEdit } from '@/api/system'

export default {
  name: 'DialogAdd',
  props: {
    menuList: {
      type: Array,
      default: () => []
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      editModel: 'add',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      form: {
        id: '',
        level: 1, // 菜单类型
        title: '', // 菜单名称
        name: '', // 路由名称
        path_p: '', // 菜单路径
        path: '',
        icon: '', // 图标
        sort: '', // 排序
        affix: false, // 是否固定在导航
        father_id: '',
        father_name: ''
      },
      rules: {
        title: [
          { required: true, message: '菜单名称不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '路由名称不能为空', trigger: 'blur' }
        ],
        path_p: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        affix: [
          { required: true, message: '请选择是否固定在导航', trigger: 'blur' }
        ],
        father_name: [
          {
            required: true,
            message: '请选择上级菜单',
            trigger: ['blur', 'change']
          }
        ]
      },
      loading: false
    }
  },
  computed: {},
  mounted() {
    if (this.info?.id) {
      this.editModel = 'edit'
      this.form = this.info
    }
  },
  methods: {
    // 保存
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.editModel === 'add') {
            apiSysPermissionAdd(this.form)
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.$emit('success')
                }, 1000)
              })
              .catch((res) => {
                this.loading = false
              })
          } else {
            apiSysPermissionEdit(this.form)
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.$emit('success')
                }, 1000)
              })
              .catch((res) => {
                this.loading = false
              })
          }
        }
      })
    },
    // 取消
    handleCancel() {
      this.$emit('close')
    },
    // 上级菜单点击
    handleNodeClick(data) {
      this.form.father_id = data.id
      this.form.father_name = data.title
      this.$refs.selectTree.blur()
    },
    // 切换菜单类型
    levelChange(data) {
      if (data === '1') {
        this.form.father_id = ''
        this.form.father_name = ''
      } else if (data === '2') {
        this.form.path_p = ''
        this.form.icon = ''
      } else if (data === '3') {
        this.form.path_p = ''
        this.form.path = ''
        this.form.icon = ''
      }
    }
  }
}
</script>
<style>
.el-select-dropdown.el-popper {
  min-height: 200px;
}
</style>
